import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import http from "../../api/http"
import { NavBar } from 'antd-mobile'
import styles from "./index.module.css"
function Index() {
  const {id}=useParams()
  const navigate=useNavigate()
  console.log(id)
  const [deitleItem,setdeitleTiem]=useState({})
  const getlist=async()=>{
    const res=await http.get("/api/list/detail",{params:{id}})
    const {data}=res.data

    setdeitleTiem(data)

    if(!data.length===0){
      return <div>加载中...</div>
    }
  }
  useEffect(()=>{
    getlist()
  },[])
  return (
    <div>
      <NavBar onBack={()=>navigate("/")}>详情页</NavBar>
      <div className={styles.delitem}>
        <img src={deitleItem.image} alt="" />
      </div>
      <h2>厘清地平线上的艺术魅力：视觉创意集聚的未来空间</h2>
      <p>关于本次活动</p>
      <span>
        欢迎参加"厘清地平线上的艺术魅力：
        视觉创意集聚的未来空间"活动！
        本次活动将得你进入一个充满艺术
        魅力与创意的未来空间，碳素艺术在
        视觉上的无限可能性
      </span>

      <div className={styles.btn} onClick={()=>navigate("/order",{state:deitleItem})}>
        立即购票
      </div>
    </div>
  )
}

export default Index
